<%@ include file="/WEB-INF/views/common/includes.jsp"%>

<head>
<script><%@ include file="/WEB-INF/theme/js/select2/select2.min.js"%></script>

</head>
<body>
	<c:if test="${rateOnRecipe != 0 && not empty user}">
		<div class="alert alert-danger">
			<button type="button" class="close" data-dismiss="alert">
				<i class="icon-remove"></i>
			</button>
			<i class="icon-ban-sign"></i>You rated <strong><c:out
					value="${rateOnRecipe}" /></strong> for this recipe!
		</div>
	</c:if>
	<section class="panel">
		<c:url var="thisURL" value="publicProfile">
		</c:url>
		<div class="panel-body">
			<div class="row">
				<div class="col-sm-6">
					<img src="/recipe/picture/${recipeId}">
				</div>
				<div class="col-sm-6">
					<div class="row">
						<div class="font-bold"
							style="font-size: 20px; margin-bottom: 40px;">${recipename}
							<div class="select col-lg-5"
								style="float: right; margin-right: 15px;" data-resize="auto">
								<c:if test="${not empty user}">
									<c:if test="${not isFavorited}">
										<form method="post" action="favRecipe">
											<input type="submit" class="btn btn-success"
												value="Favorite Recipe" /> <input type="hidden"
												value="${param.recipeId}" name="recipeId" />
										</form>
									</c:if>

									<c:if test="${isFavorited}">
										<form method="post" action="unfavRecipe">
											<input type="submit" class="btn btn-danger"
												value="Unfavorite Recipe" /> <input type="hidden"
												value="${param.recipeId}" name="recipeId" />
										</form>
									</c:if>
								</c:if>
								<button type="button" style="float: right; margin-top: -34px"
									data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
									<span class="dropdown-label" style="width: 62px;"><i
										class="icon-share"></i></span>
								</button>
								<ul class="dropdown-menu" style="min-width: 0px">
									<li data-value="1"><a
										href="http://twitter.com/share?text=Check this recipe out!&url=<c:out value="${currentUrl}"/>">
											<i class="icon-twitter"></i>
									</a></li>
									<li data-value="2"><a href="#"><i
											class="icon-facebook"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<section class="panel">
						<header class="panel-heading">
							<b>Ingredients</b>
						</header>
						<ul class="list-group alt">
							<c:forEach var="text" items="${ingredientlist}">
								<li class="list-group-item">
									<div class="media-body">
										<div>${text}</div>
									</div>
								</li>
							</c:forEach>
						</ul>

					</section>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="col-lg-4">
						<c:url var="thisURL" value="publicProfile">
						</c:url>
						<a href="<c:out value="${thisURL}?username=${recipeowner}"/>">
							<b>by ${recipeowner}</b>
						</a>
					</div>
				</div>
				<div class="col-sm-6 text-right"
					style="margin-top: -7px; margin-bottom: 15px">
					<a href="#" class="btn btn-primary btn-sm">See Video</a> <a
						href="#" class="btn btn-primary btn-sm">See Tools</a>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div style="float: left; margin-bottom: 15px">
						<i class="icon-time"></i> <strong>Cook Time:</strong> ${cooktime}<strong
							style="margin-right: 75px"> Minutes</strong>
					</div>
					<div style="float: left; margin-bottom: 15px">
						<i class="icon-time"></i> <strong>Preparation Time:</strong>
						${preptime}<strong style="margin-right: 75px"> Minutes</strong>
					</div>

					<div style="float: left; margin-bottom: 15px">
						<i class="icon-time"></i> <strong>Total Time:</strong>
						${totaltime}<strong style="margin-right: 75px"> Minutes</strong>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-12">

					<div class="col-sm-6" style="margin-left:-15px">
						<strong style="float: left">RATE:</strong>

						<div style="float: left"
							data-bind="foreach: new Array(full(${rating}))">
							<i class="icon-star"></i>
						</div>
						<div style="float: left"
							data-bind="foreach: new Array(half(${rating}))">
							<i class="icon-star-half-empty"></i>
						</div>
						<div style="float: left; margin-right: 5px"
							data-bind="foreach: new Array(empty(${rating}))">
							<i class="icon-star-empty"></i>
						</div>

						<p id="rate" style="display: none">${rating}</p>
						<strong>${rating}</strong> <strong>/5</strong>
					</div>
				</div>
				<div class="col-sm-4">
					<c:if test="${not empty user}">
						<form method="post" action="rateRecipe">
							<select id="how" class="form control col-sm-4 m-b float:right"
								style="font: initial; margin-left: 15px; float: none"
								name="rate">
								<option value="1" selected="selected">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
							</select> <input type="submit" style="float: left; margin-left: -15px"
								class="btn btn-primary btn-xs" value="Rate Recipe" /> <input
								type="hidden" value="${param.recipeId}" name="recipeId" />
						</form>
					</c:if>

				</div>
				<div class="col-sm-2 text-right"
					style="padding-right: 0px; float: left">
					<strong>${ratingcount}</strong> person voted!
				</div>
			</div>
	
		<div class="row">
			<div class="col-sm-12">
				<section class="panel">
					<header class="panel-heading">
						<b>Preparation method:</b>
					</header>
					<div class="panel-body">
						<p>${recipedescription}</p>
					</div>
				</section>
			</div>
		</div>
		<div class="row col-lg-12"
			style="border: 1px solid gainsboro; border-radius: 10px; margin-top: 15px; margin-left: 0px; margin-bottom: 15px; padding: 30px">
			<div class="row" style="margin-bottom: 15px">
				<div class="col-lg-6">
					<span class="text-muted"><span class="text-bold"
						style="font-weight: 900">Total Carbs:</span> <br> <c:out
							value="${carbs}" /></span>
				</div>
				<div class="col-lg-6">
					<span class="text-muted"><span class="text-bold"
						style="font-weight: 900">Total Calorie:</span> <br> <c:out
							value="${calory}" /></span>

				</div>
			</div>
			<div class="row" style="margin-bottom: 15px">
				<div class="col-lg-6">
					<span class="text-muted"><span class="text-bold"
						style="font-weight: 900; height: 50px">Total Protein:</span> <br>
						<c:out value="${protein}" /></span>

				</div>
				<div class="col-lg-6">
					<span class="text-muted"><span class="text-bold"
						style="font-weight: 900; height: 50px">Total Fat:</span> <br>
						<c:out value="${fat}" /></span>

				</div>
			</div>
		</div>
		</div>
		<section class="panel" style="margin-left: 15px; margin-right: 15px;">
			<header class="panel-heading text-right bg-light">
				<ul class="nav nav-tabs pull-left">
					<li class="active"><a href="#comments" data-toggle="tab"><i
							class="icon-comments text-default"></i>Comments</a></li>
					<li><a href="#suggestions" data-toggle="tab"><i
							class="icon-align-justify text-default"></i>Derivations</a></li>
				</ul>
				<span>&nbsp;</span>
			</header>
			<div class="panel-body"
				style="padding: 60px; padding-left: 75px; padding-right: 130px;">
				<div class="tab-content">
					<div class="tab-pane fade active in" id="comments">
						<section class="comment-list block">
							<c:if test="${not empty comments}">
								<c:forEach var="aComment" items="${comments}">
									<article id="comment-id-1" class="comment-item">
										<a class="pull-left thumb-sm"> <img
											src="profile/picture/${aComment.userid}" class="img-rounded">
										</a> <span class="arrow left"></span>
										<section class="comment-body panel">
											<header class="panel-heading">
												<a href="#" style="font-weight: 700">${aComment.user}</a> <span
													class="text-muted m-l-sm pull-right"> <i
													class="icon-time"></i> ${aComment.createDate}
												</span>
											</header>
											<div class="panel-body">
												<div>${aComment.comment}</div>
												<div class="comment-action m-t-sm text-right">
													<button id="${aComment.id}like" type="button"
														data-toggle="class" class="btn btn-white btn-sm"
														onclick="likefunct(this)">
														<div id="${aComment.id}likeoutput">0</div>
														<i class="icon-thumbs-up text-muted text"></i> <i
															class="icon-thumbs-up text-success text-active"></i>
													</button>
													<button id="${aComment.id}dislike" data-toggle="class"
														class="btn btn-white btn-sm" onclick="dislikefunct(this)">
														<div id="${aComment.id}dislikeoutput">0</div>
														<i class="icon-thumbs-down text-muted text"></i> <i
															class="icon-thumbs-down text-danger text-active"></i>
													</button>
												</div>
											</div>
										</section>
									</article>
								</c:forEach>
							</c:if>
							<!-- comment form -->
							<c:if test="${not empty user}">
								<article class="comment-item media" id="comment-form">
									<a class="pull-left thumb-sm"><img
										src="/profile/picture/${user.id}" class="img-rounded"></a>
									<section class="media-body">
										<form method="get" action="saveComment" class="m-b-none">
											<div class="input-group">
												<input type="text" id="newComment" name="comment"
													class="form-control" placeholder="Write your comment here">
												<span class="input-group-btn">
													<button class="btn btn-primary" type="submit" value="Send">SEND</button>
													<input type="hidden" value="${param.recipeId}"
													name="recipeId" />
												</span>
											</div>
										</form>
									</section>
								</article>
							</c:if>
						</section>
					</div>
					<div class="tab-pane" id="suggestions">
						<section class="panel">
							<div class="col-lg-12">
								<div class="panel-heading" style="height: 50px">
									<div class="col-lg-8">
										<h5>Derived Recipes:</h5>
									</div>
									<div class="col-lg-4">
										<a href="deriveRecipe?recipeId=${param.recipeId}"
											class="btn btn-success"><i class="icon-plus"></i> Add New
											Derivation</a>
									</div>
								</div>
								<c:if test="${not empty derivedRecipes}">
									<div class="panel-body">
										<c:forEach var="text" items="${derivedRecipes}">
											<div class="col-lg-2">
												<a href="#" class="pull-left thumb-md m-r"> <c:if
														test="${not empty text.derived_recipe}">
														<img src="recipe/picture/${text.derived_recipe}"
															class="img-rounded">
													</c:if>
												</a>
												<%--Profile resmi yoksa hata donmesin. Default avatar donsun. --%>
												<c:if test="${empty text.derived_recipe}">
													<a href="#" class="pull-left thumb m-r"> <!-- <img src="theme/images/recipe_default.jpg" class="img-rounded"> -->
													</a>
												</c:if>
											</div>
											<div class="col-lg-3">
												<c:url var="goToTheRecipe"
													value="/recipe/recipeInfo?recipeId=${text.derived_recipe}"></c:url>
												<a href="<c:out value="${goToTheRecipe}"/>">${text.derived_recipe_name}</a>
											</div>
										</c:forEach>
									</div>
								</c:if>
								<c:if test="${empty derivedRecipes}">
								Sorry, this recipe haven't got any derivation.
							</c:if>
							</div>
						</section>
					</div>
				</div>
			</div>
		</section>
	</section>

	<script>
	
	var full = function(rate) {
		console.log(rate);
		return parseInt(rate);
	}

	var half = function(rate) {
		if (rate == parseInt(rate)) {
			return 0;
		} else {
			return 1;
		}
	}

	var empty = function(rate) {
		return parseInt(5 - rate);
	}
		clicked = 0;
		disclicked = 0;
		likeresult = 0;
		dislikeresult = 0;
		function likefunct(obj) {
			var id = obj.id;
			var val = document.getElementById(id + 'output');
			var value = parseInt(val.innerHTML);
			if (clicked == 0 && value == 0 && dislikeresult == 0) {
				clicked = 1;
				value++;
			} else if (clicked == 0 && value == 1) {
				clicked = 1;
				value--;
			} else if (clicked == 1 && value == 1) {
				clicked = 0;
				value--;
			} else if (clicked == 1 && value == 0 && dislikeresult == 0) {
				clicked = 0;
				value++;

			}

			val.innerHTML = value;
			likeresult = value;
		};

		function dislikefunct(obj) {
			var id = obj.id;
			var val = document.getElementById(id + 'output');
			var value = parseInt(val.innerHTML);
			if (clicked == 0 && value == 0 && likeresult == 0) {
				clicked = 1;
				value++;
			} else if (clicked == 0 && value == 1) {
				clicked = 1;
				value--;
			} else if (clicked == 1 && value == 1) {
				clicked = 0;
				value--;
			} else if (clicked == 1 && value == 0 && likeresult == 0) {
				clicked = 0;
				value++;
			}
			val.innerHTML = value;
			dislikeresult = value;
		}
		
		var StarViewModel = function() {

			
		};

		ko.applyBindings(new StarViewModel());
	</script>
</body>

